<template>
  <div class="person">
    <h2>一辆{{ car.brand }}车，价值{{ car.price }}万元</h2>
    <button @click="changePrice">修改汽车的价钱</button>
    <button @click="changeCar">修改汽车</button>
  </div>
  <h2>当前求和为：{{ sum }}</h2>
  <button @click="changeSum">点我sum+1</button>
</template>
<script setup lang="ts">

import {reactive, ref} from "vue";

//若需要一个基本类型的响应式数据，必须使用ref
// 若需要一个响应式对象，层次不深，ref、reactive都可以
// 若需要一个响应式对象，且层次较深，建议使用reactive

// 通过添加reactive将对象/数组变为响应式数据
let car = reactive({brand: '奔驰', price: 100})
let sum = ref(0)

function changeCar() {
  // car = {brand: '宝马', price: 120}  //不生效
  Object.assign(car,{brand: '宝马', price: 120})  //生效
}

function changePrice() {
  car.price += 10
}

function changeSum() {
  sum.value += 1

}
</script>
<style scoped>
.person {
  background-color: #e7abab;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>